<template>
  <div class="mains">
    <div class="header">
      <div class="zi2">{{ cont.projectName }}</div>
      <img class="img" :src="cont.logo" alt="" />
      <div class="zi1">{{ cont.organizationName }}</div>

      <el-dropdown class="yi" trigger="click">
        <span class="el-dropdown-link">
          <i class="el-icon-user"></i>个人信息
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-setting"
            ><span @click="xiu" class="ki">修改信息</span></el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-delete">
            <span @click="tui" class="ki">退出登录</span></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown @command="tiao" class="yu" trigger="click">
        <el-button
          @click="cangt"
          size="mini"
          type="warning"
          class="bn"
          icon="el-icon-star-off"
          circle
        ></el-button>
        收藏列表
        <el-dropdown-menu slot="dropdown">
          <div v-for="(item, index) in list" :key="index">
            <el-dropdown-item :command="item.tId" icon="el-icon-star-on"
              >{{ item.tName }}
              <el-button
                @click.stop="qu(item.tId)"
                size="mini"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </el-dropdown-item>
          </div>

          <el-dropdown-item command="1">----------</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

   
      <div class="asider">
        <el-menu
          @open="1"
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#fff"
          text-color="rgb(144, 180, 33)"
          active-text-color="#409eff"
        >
          <div v-for="(item, index) in menu" :key="index">
            <el-submenu v-if="item.typeTwosVo.length != 0" :index="index + '1'">
              <template slot="title">
                <div class="ind">{{ item.name }} </div>
              </template>
              <div v-for="(initem, inindex) in item.typeTwosVo" :key="inindex">
                <el-menu-item
                  @click="change(initem.tid)"
                  :index="index + '1' - inindex + '1'"
                  >
                  <span class="zi3">{{ initem.tname }}</span>
                  

                  <span class="fy"
                    >{{
                      initem.studyState == 1
                        ? "未学习"
                        : initem.studyState == 2
                        ? "学习中"
                        : "已学完"
                    }}
                  </span>
                </el-menu-item>
              </div>
            </el-submenu>

            <el-menu-item v-else :index="index + ''">
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </div>
   

    <div class="leftss"></div>
    <div class="main">
      <!-- <keep-alive> -->
      <router-view></router-view>
      <!-- </keep-alive> -->
    </div>
    <div class="rightss"></div>

    <div class="footer">
      <p class="f1">
        {{ cont.siteProfile }} |
        {{ cont.loginFailure }}
      </p>
      <p class="f2">
        {{ cont.siteProfile }}
        {{ cont.copyrightNotice }} {{ cont.archivalInformation }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [],
      user: "",
      cont: "",
      list: [],
      token: "",
      lj: "",
      drawer: false,
    };
  },
  async created() {
    let token = JSON.parse(localStorage.getItem("login2")).token;
    console.log(token);
    this.user = JSON.parse(localStorage.getItem("login2"));
    let res = await this.$http.post("/iSupport-api/type-one/list", { token });

    this.menu = res.data;
    console.log(this.menu);
    res.data.forEach((item) => {
      console.log(item.typeTwosVo.length);
    });

    let re = await this.$http.post("/user/config");

    this.cont = re.data;
    console.log(re.data, 111111);
    this.token = token;
  },
  methods: {
    change(index) {
      this.$router.push("/index/chi/" + index);
    },
    xiu() {
      this.$router.push("/gai");
    },
    async tui() {
      let res = await this.$http.post("/user/logout", {
        token: this.user.token,
      });
      console.log(res);
      this.$router.push("/login");
    },
    async cangt() {
      let res = await this.$http("/iSupport-api/collect/list", {
        params: { token: this.token, current: 1, size: 5 },
      });
      console.log(res.data.data);
      this.list = res.data.data;
      if (res.data.data.length != 0) {
        this.ij = false;
      } else {
        this.ij = true;
      }
    },
    tiao(index) {
      this.$router.push("/index/chi/" + index);
    },
    async qu(id) {
      let formData = new FormData();
      formData.append("token", this.token);
      formData.append("tId", id);

      let p = await this.$http.post("/iSupport-api/collect/delete", formData);
      console.log(p);

      this.$message({
        message: "恭喜你，删除成功",
        type: "success",
      });

      this.cangt();
    },
  },
};
</script>

<style>
.v {
  width: 33px;
  height: 33px;
  /* position: absolute; */
  margin-left: 10px;
  /* right: 0; */
  text-align: center;
}
* {
  padding: 0;
  margin: 0;
}
.el-dropdown {
  display: inline-block;
  /* position: relative;
    right: 200px; */
  margin: 1px 0 0 79%;
  color: #606266;
  font-size: 14px;
  cursor: pointer;
}
.header {
  width: 100%;
  height: 70px;
  /* border: 1px solid red; */
  background: #f0f0f0;
  /* border-bottom: 1px solid rgb(49, 39, 39); */
  /* box-shadow: 1px 1px 20px #000; */
  line-height: 70px;
  display: flex;
  overflow: hidden;
}
.asider {
  width: 15%;
  /* height: 801px; */
  /* border: 1px solid red; */
  background: #f0f0f0;
  background:#fff;
}
.footer {
  width: 100%;
  height: 170px;
  /* position: absolute;
  bottom: 0; */
  /* border: 1px solid red; */
  text-align: center;
  font-size: 14px;
  background: #333333;
  color: #fff;
}
.fy {
  position: absolute;
  right: 5px;
  top: 14px;
  display: inline-block;
  background:  rgb(144, 180, 33);
  font-size: 12px;
  color: black;
  width: 20%;
  text-align: center;
  line-height: 20px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
}
.main {
  width: 50%;
  height: 500px;
  /* border: 1px solid red; */
  margin-top: 50px;
  /* margin: 30px 200px 0 200px; */
  /* margin: 0 auto; */
}
.mains {
  display: flex;
  flex-wrap: wrap;
  /* background: #f0f0f0; */
}
.h {
  width: 100px;
  height: 30px;
  /* border: 1px solid red; */
  position: absolute;
  right: 130px;
  top: 20px;
  /* overflow: hidden; */
}
.zi3{
  font-size: 15px;
}
.h span {
  line-height: 30px;
  display: inline-block;
  margin-bottom: 10px;
}
.el-icon-user {
  font-size: 20px;
  /* position: absolute;
  top: 5px; */
}
.xiu {
  /* width: 170px;
  height: 60px; */
  /* border: 1px solid red; */
  margin: 0px 0 10px 20px;
  display: inline-block;
  position: absolute;
}
.ki {
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.leftss {
  width: 7%;
  height: 100vh;
  height: calc(100vh - 70px - 170px);

  /* border: 1px solid red; */
  background: #f0f0f0;
}
.el-menu-vertical-demo {
  width: 99%;
  /* height: 0; */
    height: calc(100vh - 70px - 170px);

  overflow: hidden;
}
.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 0;
}
.rightss {
  width: calc(28%);
  height: calc(100vh - 70px - 170px);
  /* border: 1px solid red; */
  background: #f0f0f0;
}
.zi1 {
  /* display: inline-block; */
  /* margin-bottom: 20px; */
  display: block;
  width: 70px;
  /* position: absolute; */
  margin-left: 2.6%;
}
.zi2 {
  margin-left: 2%;
  font-size: 40px;
  width: 8%;
}
.img {
  width: 50px;
  height: 50px;
  display: block;
  margin: 10px 0 0 150px;
}
.xi {
  width: 300px;
  height: 50px;
  /* border: 1px solid red; */
  display: inline-block;
  /* margin: 10px 0 0 340px; */
  position: absolute;
  left: 340px;
  top: 10px;
}
.f1 {
  display: inline-block;
  margin-top: 30px;
  line-height: 60px;
}
.f2 {
  line-height: 60px;
}
.yu {
  position: absolute;
  top: -2px;
  right: 215px;
  cursor: pointer;
}
.yi {
  position: absolute;
  /* left: -100px;
  top: -17px; */
  cursor: pointer;
}
.bv {
  margin-left: 15px;
}
.ind {
  /* display: block; */
  /* width: 200px; */
  /* border-bottom: 1px solid black; */
  font-weight: 600;
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  html {
    width: 100%;
  }
  .mains {
    width: 100%;
  }
  .bn {
    position: absolute;
    right: 2.6%;
    /* top: 10px; */
  }
  .el-dropdown {
    display: inline-block;
    margin: 1px 0 0 59%;
    color: #606266;
    font-size: 14px;
  }
  .el-menu-vertical-demo {
    width: 99%;
    height: calc(100vh - 70px);
  }
  .asider {
    width: 100%;
    /* height: calc(100vh - 70px); */
    height: 0;
  }
  .zi2 {
    font-size: 22px;
    width: 24%;
  }
  .yu {
    position: absolute;
    top: -2px;
    right: 2%;
    /* margin: 0 0 0 200px; */
    cursor: pointer;
    font-size: 12px;
  }
  .zi1 {
    margin-left: 0;
  }
  .img {
    margin: 14px 0 0 0;
    width: 40px;
    height: 40px;
  }
  .el-button--mini.is-circle {
    position: absolute;
    right: 102%;
    top: 34%;
    padding: 4px;
  }
  .footer {
    width: 100%;
  }
  .xiu {
    margin: 0px 0 0% 0%;
  }
  .yi {
    position: absolute;
    /* left: 40%;
    font-size: 12px; */
  }
  .xi {
    position: absolute;
    left: 11.1%;
  }
  .h span {
    font-size: 12px;
  }
  .leftss {
    width: 0;
  }
  .rightss {
    width: 0;
  }
  .main {
    width: 100%;
  }
}
</style>